<script lang="ts" setup>
import {storeToRefs} from 'pinia'
import {useTagStore} from '@/stores/tag'
import {useRoute,useRouter} from "vue-router"
import { ref, nextTick, watch, onMounted } from 'vue'

const tagStore = useTagStore()
const {tagList} = storeToRefs(tagStore)
const route = useRoute()
const router = useRouter()

// 获取标签容器引用
const tagBoxRef = ref<HTMLElement | null>(null)

// 判断标签是否激活
const isActive = (tag) => {
  return route.matched.some(match => {
    return match.path === tag.path
  })
}

// 跳转到指定菜单
const goMenu = (tag) => {
  console.log(tag, 112233)
  router.push(tag.path)
}

/**
 * 关闭标签页的方法。
 * 
 * 此方法用于处理关闭标签页的逻辑，具体步骤如下：
 * 1. 检查要关闭的标签页是否为当前激活的标签页。
 * 2. 调用 [tagStore](file:///Users/chencheng/code/asset/admin/src/components/Tag.vue#L3-L3) 中的 `removeTag` 方法来删除指定索引的标签页，同时传入该标签页是否为当前激活状态的信息。
 * 
 * @param {Object} tag - 要关闭的标签对象，包含标签的相关信息，如路径、元数据等。
 * @param {number} index - 要关闭的标签在标签列表中的索引位置。
 */
const closePage = (tag, index) => {
  // 判断当前路由的路径是否与要关闭的标签的路径相同，以此判断该标签是否为当前激活的标签页
  const isCurrent = route.path === tag.path;
  
  // 调用 tagStore 中的 removeTag 方法，传入要删除的标签的索引以及该标签是否为当前激活状态的信息，以执行删除标签的操作
  tagStore.removeTag(index, isCurrent);
}

// 点击首页标签
const handleClickIndexTag = () => {
  router.push('/')
}

// 滚动到指定标签位置
const scrollToView = () => {
  nextTick(() => {
    if (!tagBoxRef.value) return
    
    const container = tagBoxRef.value
    let targetElement: HTMLElement | null = null
    
    // 查找当前激活的标签元素
    if (route.path === '/' || route.path === '/index') {
      // 首页情况
      targetElement = document.querySelector('.index-tag') as HTMLElement
    } else {
      // 其他页面情况 - 查找对应的标签
      const activeTags = document.querySelectorAll('.el-tag.success')
      if (activeTags.length > 0) {
        targetElement = activeTags[activeTags.length - 1] as HTMLElement
      }
    }
    
    // 如果找到了目标元素，则滚动到可视区域
    if (targetElement) {
      const containerScrollLeft = container.scrollLeft
      const containerWidth = container.clientWidth
      const targetOffsetLeft = targetElement.offsetLeft
      const targetWidth = targetElement.offsetWidth
      
      // 添加额外边距确保标签完全可见
      const padding = 130
      
      // 检查是否需要滚动
      if (targetOffsetLeft < containerScrollLeft + padding) {
        // 目标在左侧不可见区域（留出一些边距）
        container.scrollTo({
          left: Math.max(0, targetOffsetLeft - padding),
          behavior: 'smooth'
        })
      } else if (targetOffsetLeft + targetWidth > containerScrollLeft + containerWidth - padding) {
        // 目标在右侧不可见区域（留出一些边距）
        container.scrollTo({
          left: targetOffsetLeft + targetWidth - containerWidth + padding,
          behavior: 'smooth'
        })
      }
      // 特殊处理：如果是第一个标签（首页），确保完全滚动到最左侧
      else if (targetElement.classList.contains('index-tag')) {
        container.scrollTo({
          left: 0,
          behavior: 'smooth'
        })
      }
    }
  })
}

// 监听路由变化
watch(
  () => route.path,
  () => {
    setTimeout(() => {
      scrollToView()
    }, 50) // 缩短延迟时间
  }
)

// 监听标签列表变化
watch(
  () => tagList.value,
  () => {
    setTimeout(() => {
      scrollToView()
    }, 50) // 缩短延迟时间
  },
  { deep: true }
)

// 组件挂载后初始化
onMounted(() => {
  setTimeout(() => {
    scrollToView()
  }, 50)
})
</script>

<template>
    <div class="tag-box" ref="tagBoxRef">
      <el-tag type="info" effect="plain" class="index-tag" @click="handleClickIndexTag">
        首页
      </el-tag>
      <el-tag 
        class="el-tag" 
        type="info" 
        v-for="(tag,index) in tagList" 
        :key="tag.url"  
        effect="plain"  
        @click="goMenu(tag)" 
        @close="closePage(tag,index)" 
        closable 
        :class="isActive(tag) ? 'success' : 'info'"
      >
        {{ tag.meta.title }}
      </el-tag>
    </div>
</template>

<style lang="less" scoped>
.tag-box {
  width: 95%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-top: 10px;
  scrollbar-width: none; /* Firefox */
  &::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .el-tag {
    padding: 12px 8px;
    margin-right: 10px;
    color: #495060;
    border: 1px solid #e5e7ea;
    flex-shrink: 0; // 防止标签被压缩
    cursor: pointer;
    white-space: nowrap;
  }

  .el-tag.success {
    color: #fff;
    background: #4297ff;
    border: 1px solid #4297ff;
  }

  :deep(.el-tag.success .el-tag__close) {
    color: #fff !important;
  }

  :deep(.el-tag.success .el-tag__close svg) {
    fill: #fff !important;
  }

  .el-tag.info {
    color: #495060;
    background: #fdfdfd;
  }
}
.index-tag {
  cursor: pointer;
  flex-shrink: 0; // 防止首页标签被压缩
  white-space: nowrap;

  &:hover {
    color: #67c23a;
  }
}
</style>